<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="social-bars"> <div class="fb-bar"><a href="https://www.facebook.com/13Aman137" target="_blank"></a></div> <div class="gplus-bar"><a href="https://plus.google.com/+AmanSinghProfile" target="_blank"></a></div> <div class="insta-bar"><a href="https://instagram.com/instaamansingh/" target="_blank"></a></div> <div class="linked-bar"><a href="https://www.linkedin.com/in/13aman137/" target="_blank"></a></div> <div class="twitter-bar"><a href="https://twitter.com/Aman_Singh_3797" target="_blank"></a></div> </div> <div class="heading"><h1>Social Widget #2<br/>Hover & Click them!</h1></div>

*{ box-sizing: border-box; } body{ margin: 0; padding: 0; } .social-bars{ right: 0; top: 32vh; position: absolute; /* Make it fixed so that it never gets out of view.*/ z-index: 1000; margin-bottom: 100px; /* Added just to be view properly in this pen, you can remove it this will not disturb anything.*/ } .social-bars div{ height: 50px; width: 50px; transition: 0.4s; } .social-bars div a{ display: block; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } .fb-bar{ background-color: rgb(61, 90, 152); padding: 7px; border-top-left-radius: 10px; } .fb-bar a{ background: url(https://i.lensdump.com/i/jeyoQ.png); height: 40px; width: 40px; } .gplus-bar{ background-color: rgb(255,87,34); padding: 9px; } .gplus-bar a{ background: url(https://i.lensdump.com/i/jeG2a.png); height: 35px; width: 35px; } .insta-bar{ background-color: rgb(66,66,66); padding: 7px; } .insta-bar a{ display: block; background: url(https://i.lensdump.com/i/jehek.png); height: 40px; width: 40px; } .linked-bar{ background-color: rgb(25,118,210); padding: 7px; } .linked-bar a{ background: url(https://i.lensdump.com/i/jeaJe.png); height: 40px; width: 40px; } .twitter-bar{ background-color: rgb(3,169,244); padding: 11px; border-bottom-left-radius: 10px; } .twitter-bar a{ background: url(https://i.lensdump.com/i/jn2xx.png); height: 30px; width: 30px; } .social-bars div:hover{ margin-left: -10px; width: 60px; } .heading{ margin-left:28vw; padding-top:15vh; color: rgb(60,60,60); } .heading h1{ font-size:3em; }